import React from 'react';
import { useNavigate } from 'react-router-dom';
import { isLoggedIn, getUserInfo, clearLoginStatus, clearSavedCredentials } from '../utils/auth';
import './Header.css';

const Header: React.FC = () => {
  const navigate = useNavigate();
  const userInfo = getUserInfo();

  const handleLogout = () => {
    clearLoginStatus();
    clearSavedCredentials(); // 登出时也清除保存的凭据
    navigate('/login');
  };

  const handleLogin = () => {
    navigate('/login');
  };

  return (
    <header className="header">
      <div className="header-container">
        
        <nav className="nav">
          <ul>
            <li><a href="/home">首页</a></li>
            <li><a href="/index">功能</a></li>
            <li><a href="/ment">管理</a></li>
          </ul>
        </nav>
        
        <div className="user-section">
          {isLoggedIn() && userInfo ? (
            <div className="user-info">
              <span className="username">欢迎，{userInfo.username}</span>
              <button onClick={handleLogout} className="logout-btn">
                登出
              </button>
            </div>
          ) : (
            <button onClick={handleLogin} className="login-btn">
              登录
            </button>
          )}
        </div>
      </div>
    </header>
  );
};

export default Header;
